<template>
  <div>
    <el-table
      :data="materialReqDetails"
      size="mini"
      style="width: 100%;overflow:visible;"
      height="500"
      max-height="600">
      <el-table-column prop="moCode" label="MO单号"/>
      <el-table-column prop="itemCode" label="物料编号"/>
      <el-table-column label="物料名称" prop="itemName" show-overflow-tooltip/>
      <el-table-column label="提料数" width="100" prop="oriReqQty">
        <template slot-scope="scope">
          <el-input-number v-model.number="scope.row.oriReqQty" :disabled="true" :controls="false" :precision="2" size="mini" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column prop="actualSendQty" width="100" label="实际发料数">
        <template slot-scope="scope">
          <el-input-number v-model.number="scope.row.actualSendQty" :disabled="!editable" :controls="false" :precision="2" size="mini" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="发料仓库" width="260">
        <template slot-scope="scope">
          <WarehouseTreeSelect v-model="scope.row.toWarehouseId" :editable="editable" :param-data="scope.row" append-to-body placeholder="选择仓库" @warehouseSelect="warehouseSelect" @setDefaultWarehouseId="setDefaultWarehouseId" />
        </template>
      </el-table-column>
      <el-table-column label="发料库位" width="200">
        <template slot-scope="scope">
          <el-input v-model="scope.row.toStorelocationName" :disabled="!editable" size="mini" style="width: 100%;">
            <el-button v-if="editable" slot="append" icon="el-icon-plus" size="mini" title="点击选择库位" @click="doSelectSl(scope.row)" />
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="单位">
        <template slot-scope="scope">
          <template v-for="item in dicts.item_unit">
            <span v-if="scope.row.unit && scope.row.unit === item.dictCode" :key="item.id" >{{ item.dictName }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="规格" prop="itemSpec" show-overflow-tooltip />
      <el-table-column label="品牌" prop="itemBrand" show-overflow-tooltip />
      <el-table-column label="备注" width="100">
        <template slot-scope="scope">
          <el-input v-model="scope.row.rmk" :disabled="!editable" size="mini" style="width: 100%"/>
        </template>
      </el-table-column>
    </el-table>
    <storage-location-select-list ref="slSelectList" :multi-select="false" :warehouse-id="toWarehouseId" @slSelectCallback="slSelectCallback"/>
  </div>
</template>

<script>
import StorageLocationSelectList from '@/views/base/warehouse/storageLocation/module/storageLocationSelectList'
import WarehouseTreeSelect from '@/views/base/warehouse/module/WarehouseTreeSelect'

export default {
  dictTypes: ['item_unit'],
  components: { StorageLocationSelectList, WarehouseTreeSelect },
  props: {
    materialReqDetails: {
      type: Array,
      required: true
    },
    editable: {
      type: Boolean,
      default: false,
      required: false
    },
    warehouseId: {
      type: String,
      default: null,
      required: false
    },
    supForm: {
      type: Object,
      default: null,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      selectedDetailRows: [],
      style: 'width: 150px',
      toWarehouseId: null
    }
  },
  methods: {
    getMaxDetailNum() {
      let detailNum = 0
      this.materialReqDetails.forEach(tmprow => {
        if (tmprow.num > detailNum) {
          detailNum = tmprow.num
        }
      })
      return detailNum
    },
    handleSelectionChange(val) {
      this.selectedDetailRows = val
    },
    doSelectSl(row) {
      if (!row.toWarehouseId) {
        this.$notify({
          title: '请选择仓库',
          type: 'warning',
          duration: 2000
        })
        return
      }
      this.toWarehouseId = row.toWarehouseId
      const _thisform = this.$refs.slSelectList
      _thisform.initLoadData(row)
    },
    slSelectCallback(selectedRow, sourceObject, paramData) {
      const tmpDetails = JSON.parse(JSON.stringify(this.materialReqDetails))
      tmpDetails.forEach(tmprow => {
        if (tmprow.num === paramData.num) {
          tmprow.toStorelocationId = null
          tmprow.toStorelocationName = null
          if (selectedRow) {
            tmprow.toStorelocationId = selectedRow.id
            tmprow.toStorelocationName = selectedRow.slName
          }
          return
        }
      })
      this.$emit('setDetails', tmpDetails)
      sourceObject.cancel()
    },
    warehouseSelect(warehouseId, curRow) {
      const tmpDetails = JSON.parse(JSON.stringify(this.materialReqDetails))
      tmpDetails.forEach(tmpdetail => {
        if (tmpdetail.num === curRow.num) {
          tmpdetail.toWarehouseId = warehouseId
          return
        }
      })
      this.$emit('setDetails', tmpDetails)
    },
    setDefaultWarehouseId(warehouseId, curRow) {
      const tmpDetails = JSON.parse(JSON.stringify(this.materialReqDetails))
      tmpDetails.forEach(tmpdetail => {
        if (tmpdetail.num === curRow.num) {
          tmpdetail.toWarehouseId = warehouseId
          return
        }
      })
      this.$emit('setDetails', tmpDetails)
    }
  }
}
</script>
<!--<style>
  .el-table .cell{
    overflow: visible;
  }
  .el-table .el-table__body-wrapper {
    overflow: visible;
  }
</style>-->
